<template>
    <div class="user_merber_list">
        <div class="zw-form-layout">
            <el-form ref="formRef" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="会员ID/昵称/手机号：" prop="keywords" label-width="155px">
                            <el-input
                                v-model="form.keywords"
                                clearable
                                placeholder="请输入会员ID/昵称/手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="变更类型" prop="levelChangeType">
                            <el-select placeholder="全部" v-model="form.levelChangeType">
                                <el-option label="会员激活" value="ACTIVE" />
                                <el-option label="会员升级" value="UP" />
                                <el-option label="会员降级" value="DEGRADE" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="新等级" prop="newLevel">
                            <el-select v-model="form.newLevel" clearable placeholder="全部">
                                <el-option
                                    v-for="item in Data.type"
                                    :key="item.id"
                                    :label="item.memberLevelName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="原等级" prop="originLevel">
                            <el-select v-model="form.originLevel" clearable placeholder="全部">
                                <el-option
                                    v-for="item in Data.type"
                                    :key="item.id"
                                    :label="item.memberLevelName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="变更时间" prop="createdAt">
                            <el-date-picker
                                v-model="form.createdAt"
                                type="daterange"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :default-time="defaultDateRange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table :data="Data.tableList" stripe style="margin-top: 18px">
            <el-table-column label="会员ID" min-width="100" show-overflow-tooltip prop="memberNo">
                <template v-slot="{ row }">
                    <span class="link" @click="viewDetail(row)">{{ row.memberNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="会员昵称" prop="memberNickname"></el-table-column>
            <el-table-column label="手机号" prop="memberMobile"></el-table-column>
            <el-table-column label="变更类型" prop="levelChangeType"
                ><template v-slot="{ row }">
                    {{ row.levelChangeTypeName }}
                </template></el-table-column
            >
            <el-table-column label="原等级" prop="originLevel" width="100">
                <template v-slot="{ row }">
                    {{ row.originLevel || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="新等级" prop="newLevel" width="100">
                <template v-slot="{ row }">
                    {{ row.newLevel || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="变更时间" min-width="100" prop="updatedAt"></el-table-column>
        </el-table>
        <div style="margin-top: 15px">
            <Pagination
                :total="totalCount"
                :page-size="form.pageSize"
                :current-page="form.pageNum"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
    </div>
</template>

<script setup name="merberList">
import { ref, reactive, onMounted } from 'vue';
import Pagination from '@/components/Pagination.vue';
import request from '@/request/index';
const formRef = ref();
const totalCount = ref(0);
const form = reactive({
    pageNum: 1,
    pageSize: 10,
    keyword: '',
    levelChangeType: '',
    newLevel: '',
    originLevel: '',
    createdAt: null
});
const defaultDateRange = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
let Data = reactive({
    tableList: [],
    changeType: [],
    type: []
});
const typeList = reactive({ ACTIVE: '会员激活', UP: '会员升级', DEGRADE: '会员降级' });
const getList = async () => {
    const res = await request('getRankListServ', { appType: 1 });
    Data.type = res.data;
};
getList();

/**
 * 分页查询
 */
const quertRoleListHandler = async () => {
    const res = await request('levelRecord', form);
    const { list } = res.data;
    Data.tableList.length = 0;
    Data.tableList.push(...list);
    totalCount.value = res.data.totalCount;
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    searchHandler();
};

/**
 * 搜索
 */
const searchHandler = () => {
    form.pageNum = 1;
    quertRoleListHandler();
};
/**
 * 分页
 * @param {*} pageNum
 */
const changePageHandler = pageNum => {
    form.pageNum = pageNum;
    quertRoleListHandler();
};

/**
 * 每页记录数修改
 * @param {*} pageSize
 */
const changeSizeHandler = pageSize => {
    form.pageNum = 1;
    form.pageSize = pageSize;
    quertRoleListHandler();
};

const viewDetail = row => {
    window.open(location.origin + '/user/merber/detail?id=' + row.memberId + '&openKid=' + row.openKid);
};

onMounted(() => {
    searchHandler();
});
</script>
<style lang="scss" scoped>
.user_merber_list {
    .link {
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
